<template>
<div>
  <b-container class="marginTop" fluid>
    <b-row align-content="center">
      <b-col></b-col>
      <b-col>
        <b-card
          title="Home 1.0"
          tag="article"
          style="max-width: 40rem;"
          class="mb-2"
        >
          <b-row class="my-1" v-for="item in form" :key="item.id">
            <b-col sm="3">
              <label :for="item.id">{{ item.text }}:</label>
            </b-col>
            <b-col sm="6">
              <b-form-input :id="item.id" :type="item.type" v-model="item.value"></b-form-input>
            </b-col>
          </b-row>
          <div class="marginTop">
            <b-row>
              <b-button @click='submit' variant="primary">登陆</b-button>
              <div v-if="!pass">
                <b-alert variant="warning" show>用户名或密码错误</b-alert>
              </div>
            </b-row>
          </div>
        </b-card>
      </b-col>
      <b-col></b-col>
    </b-row>
  </b-container>
</div>
</template>
<script>
export default {
  data () {
    return {
      form: [
        {id: 'username', type: 'text', text: '用户名', value: 'admin'},
        {id: 'pwd', type: 'password', text: '密码', value: '123'}
      ],
      isPass: false
    }
  },
  methods: {
    submit () {
      const parms = {
        username: '',
        pwd: ''
      }
      this.form.forEach((item) => {
        parms[item.id] = item.value
      })
      this.$store.dispatch('submitLogin', parms)
    }
  },
  mounted () {
    this.submit()
  },
  computed: {
    pass: function () {
      if (typeof this.$store.getters.getLoginObj.isPass === 'undefined') {
        return true
      }
      return this.$store.getters.getLoginObj.isPass
    }
  }
}
</script>
<style scoped>
.marginTop{
  margin-top: 60px;
}
</style>
